<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" default icon="Edit" @click="handleImport"
          v-hasPermi="['order:shelf:edit']">导入优化包</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleExport"
          v-hasPermi="['order:shelf:add']">导出优化包</el-button>
      </el-col>


      <el-col :span="1.5" class="right-align-col">
        <el-button type="success" default icon="CircleCheck" @click="handleNext"
          v-hasPermi="['order:shelf:export']">开始优化</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1">

      </el-col>
      <el-col :span="6">
        <el-container>
          <el-header height="30px" class="custom-header">切割参数</el-header>
        </el-container>
        <el-main style="border: 1px solid #000000;">
          <el-row class="centered-col">
            <el-col :span="12">
              <div>磨边量</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.grind"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>掰边距</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.minWaste"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>最大刀距-X</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.max1Cut"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>最小刀距-X</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.min1Cut"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>最小刀距-Y</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.min2Cut"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>最小刀距-XZ</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.min13Cut"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>原片修边量-左</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.trimLeft"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>原片修边量-右</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.trimRight"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>原片修边量-上</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.trimTop"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>原片修边量-下</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.trimBottom"></el-input>
            </el-col>
          </el-row>
        </el-main>
      </el-col>
      <el-col :span="6">
        <el-container>
          <el-header height="30px" class="custom-header">架序及其他参数</el-header>
        </el-container>
        <el-main style="border: 1px solid #000000;">
          <el-row class="centered-col">
            <el-col :span="12">
              <div>通刀约束</div>
            </el-col>
            <el-col :span="12">
              <el-switch v-model="paramConfig.throughCut" />
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>切割树深度</div>
            </el-col>
            <el-col :span="12">
              <el-select v-model="paramConfig.treeDepth" placeholder="请选择" size="default" style="width:100%;">
                <el-option label="1" value="1" />
                <el-option label="2" value="2" />
                <el-option label="3" value="3" />
                <el-option label="4" value="4" />
              </el-select>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>架内箱间有序</div>
            </el-col>
            <el-col :span="12">
              <el-switch v-model="paramConfig.shelvesOrder" />
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>箱内有序</div>
            </el-col>
            <el-col :span="12">
              <el-switch v-model="paramConfig.boxOrder" />
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>成品开架数</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input v-model="paramConfig.maxShelf"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>原片开架数</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input :disabled="true" placeholder="暂不支持"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>输出反切</div>
            </el-col>
            <el-col :span="12">
                <el-switch v-model="paramConfig.outputBackCut" />
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>优化余料</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input :disabled="true" placeholder="暂不支持"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>临界错落距离</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input :disabled="true" placeholder="暂不支持"></el-input>
            </el-col>
          </el-row>
          <el-row class="centered-col">
            <el-col :span="12">
              <div>附加掰边距</div>
            </el-col>
            <el-col :span="12" style="background-color: chartreuse;">
              <el-input :disabled="true" placeholder="暂不支持"></el-input>
            </el-col>
          </el-row>
        </el-main>
      </el-col>
      <el-col :span="11">
      
        <el-row>
          <el-col>
          <el-container>
            <el-header height="30px" class="custom-header">原片列表</el-header>
          </el-container>
          <el-main>
       
              <el-table v-loading="loading" :data="originalList">
                <el-table-column label="批次" align="center" prop="batch" />
                <el-table-column label="宽度" align="center" prop="width" />
                <el-table-column label="高度" align="center" prop="length" />
                <el-table-column label="可用片数" align="center" prop="availableNumber" />
                <el-table-column label="优先用完" align="center" prop="isPriority" />
              </el-table>
         
            <el-col>
              <pagination v-show="originalTotal > 0" :total="originalTotal" v-model:page="originalQueryParams.pageNum"
                v-model:limit="originalQueryParams.pageSize" @pagination="getOriginalList" />
            </el-col>
          </el-main>
        </el-col>
        </el-row>
    
        <el-row>
          <el-col>
          <el-container>
            <el-header height="30px" class="custom-header">订单列表</el-header>
          </el-container>
          <el-main>
         
              <el-table v-loading="loading" :data="orderList">
                <el-table-column label="订单名称" align="center" prop="name" />
                <el-table-column label="总片数" align="center" prop="piecesNumber" />
                <el-table-column label="总箱数" align="center" prop="boxesNumber" />
                <el-table-column label="最小面积" align="center" prop="minArea" />
                <el-table-column label="最大面积" align="center" prop="maxArea" />
              </el-table>
           
            <el-col>
              <pagination v-show="orderTotal > 0" :total="orderTotal" v-model:page="orderQueryParams.pageNum"
                v-model:limit="orderQueryParams.pageSize" @pagination="getOrderList" />
            </el-col>
          </el-main>
        </el-col>
        </el-row>
      </el-col>
    </el-row>


     <!-- 添加或修改优化包对话框 -->
     <el-dialog  v-model="showNameInput" width="500px" append-to-body>
      <el-form ref="shelfRef" :model="paramConfig"  :rules="paramRules" label-width="80px" @keydown.enter.native="submitForm">
        <el-form-item label="优化包名称：" prop="name" label-width="120px">
          <el-input v-model="paramConfig.name" placeholder="请输入优化包名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="showNameInput = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>
<script setup name="paramconfig">


import useOrderStore from '@/store/modules/order'
import { listOriginalByIds } from "@/api/order/original";
import { listOrderByIds } from "@/api/order/order";
import { listProcess } from "@/api/setting/process";
import { onMounted, onActivated } from 'vue'
import { addPackage, updatePackage } from "@/api/optimize/package";

const { proxy } = getCurrentInstance();

const orderStore = useOrderStore()
const { originalIds, priorityOriginalIds, ordersIds, maxShelves } = storeToRefs(orderStore)

const loading = ref(true);
const orderList = ref([]);
const orderTotal = ref(0);
const originalList = ref([]);
const originalTotal = ref(0);
const showNameInput = ref(false);
const router = useRouter();

const orderData = reactive({
  orderForm: {},
  orderQueryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
    piecesNumber: null,
    boxesNumber: null,
    thickness: null,
    minArea: null,
    maxArea: null,
  },
  orderRules: {
    createTime: [
      { required: true, message: "创建时间不能为空", trigger: "blur" }
    ],
  }
});

const originalData = reactive({
  originalForm: {},
  originalQueryParams: {
    pageNum: 1,
    pageSize: 10,
    ids: [],
  },
  originalRules: {
    createTime: [
      { required: true, message: "创建时间不能为空", trigger: "blur" }
    ],
  }
});

const paramData = reactive({
  paramConfig: {
    grind:1.0, // 磨边量
    cuttingSpeed: 10, // 切割速度
    minWaste: 0, // 最小余料
    max1Cut: 0, // 最大刀距-X 一般来说固定
    min1Cut: 0, // 最小刀距-X  一般来说固定
    min2Cut: 0, // 最小刀距-Y  一般来说固定
    min13Cut: 0, // 最小刀距-XZ 一般来说等于掰边距
    maxShelf: 0, // 成品开架数
    trimBottom: 0, // 原片修边量-下
    trimTop: 0, // 原片修边量-上
    trimLeft: 0, // 原片修边量-左
    trimRight: 0, // 原片修边量-右
    outputBackCut: false, // 输出反切
    optimizeScrap: false, // 优化余料
    criticalOffsetDistance: 0, // 临界错落距离
    additionalBendingDistance: 0, // 附加掰边距
    treeDepth: 1, // 切割树深度
    shelvesOrder: false, // 架内箱间有序
    boxOrder: false, // 箱内有序
    originalShelvesNumber: 0,//原片开架数
    throughCut: false, // 通刀约束
    name: null, // 名称
    isOffline: 1, // 是否离线
    thickness: null, // 厚度
    orderIds: [],
    originalIds: [],
  },
  paramRules: {
  name: [
    { required: true, message: "名称不能为空", trigger: "blur" }
    ],
  }
})

const processData = reactive({
  processForm: {},
  processQueryParams: {
    pageNum: 1,
    pageSize: 10,
    originalType: null,
    thickness: null,
    minWaste: null,
    max1Cut: null,
    min1Cut: null,
    min2Cut: null,
    min13Cut: null,
    trimLeft: null,
    trimRight: null,
    trimTop: null,
    trimBottom: null
  },
  processRules: {
    createTime: [
      { required: true, message: "原片类型不能为空", trigger: "blur" }
    ],
  }
});


const { orderQueryParams, orderForm, orderRules } = toRefs(orderData);
const { originalQueryParams, originalForm, originalRules } = toRefs(originalData);
const { paramConfig, paramRules } = toRefs(paramData);
const { processForm, processQueryParams, processRules } = toRefs(processData);

function handleImport() {
    proxy.$modal.msgError("暂不支持导入");
}
function handleExport() {
    proxy.$modal.msgError("暂不支持导出");
}

/** 开始优化 */
function handleNext() {
  if(originalIds.value.length + priorityOriginalIds.value.length == 0) {
    proxy.$modal.msgError("原片不能为空");
    return;
  }
  if(ordersIds.value.length == 0) {
    proxy.$modal.msgError("订单不能为空");
    return;
  }
  showNameInput.value = true;
}



/** 查询订单选择列表 */
function getOrderList() {
  loading.value = true;
  orderQueryParams.value.ids = ordersIds.value
  if(ordersIds.value.length == 0) {
    loading.value = false;
    proxy.$modal.msgError("订单不能为空");
    return;
  }
  listOrderByIds(orderQueryParams.value).then(response => {
    orderList.value = response.rows;
    orderTotal.value = response.total;
    loading.value = false;
  });
}

/** 查询原片列表 */
function getOriginalList() {
  loading.value = true;
  const queryIds = originalIds.value.concat(priorityOriginalIds.value)  
  originalQueryParams.value.ids = queryIds
  if(queryIds.length == 0) {
    loading.value = false;
    proxy.$modal.msgError("原片不能为空");
    return;
  }
  listOriginalByIds(originalQueryParams.value).then(response => {
    originalList.value = response.rows;
    originalTotal.value = response.total;
    loading.value = false;
    for (let i = 0; i < response.rows.length; i++) {
      if (priorityOriginalIds.value.includes(response.rows[i].id)) {
        response.rows[i].isPriority = '是';
      } else {
        response.rows[i].isPriority = '否';
      }
    }
  });
}

/** 加载工艺参数 */
function loadParamConfig(response) {
  paramConfig.value.minWaste = response.rows[0].minWaste;
  paramConfig.value.max1Cut = response.rows[0].max1Cut;
  paramConfig.value.min1Cut = response.rows[0].min1Cut;
  paramConfig.value.min2Cut = response.rows[0].min2Cut;
  paramConfig.value.min13Cut = response.rows[0].min13Cut;
  paramConfig.value.trimLeft = response.rows[0].trimLeft;
  paramConfig.value.trimRight = response.rows[0].trimRight;
  paramConfig.value.trimTop = response.rows[0].trimTop;
  paramConfig.value.trimBottom = response.rows[0].trimBottom;
}


/** 查询工艺参数 */
function getProcessList() {
  processQueryParams.value.thickness = orderStore.ordersThicknessList[0]||null;
  listProcess(processQueryParams.value).then(response => {
    loadParamConfig(response);
  });
}

function orderStoreReset() {

  orderStore.setShelvesIds([]);
  orderStore.setOrdersIds([]);
  orderStore.setOriginalIds([]);
  orderStore.setPriorityOriginalIds([]);
  orderStore.setOrdersThicknessList([]);
  orderStore.setMaxShelves(0);
}


/** 提交优化包 */
function submitForm() {
  

  if(originalIds.value.length + priorityOriginalIds.value.length == 0) {
    proxy.$modal.msgError("原片不能为空");
    return;
  }
  if(ordersIds.value.length == 0) {
    proxy.$modal.msgError("订单不能为空");
    return;
  }
  if(paramConfig.value.name == null || paramConfig.value.name == '') {
    proxy.$modal.msgError("名称不能为空");
    return;
  }

  paramConfig.value.orderIds = ordersIds.value
  paramConfig.value.originalIds = originalIds.value
  paramConfig.value.priorityOriginalIds = priorityOriginalIds.value
  paramConfig.value.thickness = orderStore.ordersThicknessList[0]||null;

  addPackage(paramConfig.value).then(response => {
    showNameInput.value = false;
    orderStoreReset();
    router.push("/optimize/package");
  })
}
onActivated(() => {
  getOrderList()
  getOriginalList()
  getProcessList()
  paramConfig.maxShelf = maxShelves.value;
  console.log(paramConfig.maxShelf,'paramConfig.maxShelf');
})


</script>
<style scoped>
.right-align-col {
  margin-left: auto;
}

.custom-header {
  background-color: #f5f7fa;
  color: #909399;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  border: 1px solid #000000;
  border-radius: 1px;
}

.centered-col {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-bottom: 10px;
}
</style>